<template>
  <view class="content">
    <view class="formBox">
      <view class="formItem flex" @tap="timeShow = true">
        <view class="label flex">
          <text class="red">*</text>
          <text>反馈月份</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            {{form.month_time}}
          </view>
          <u-icon name="arrow-down" color="#999999"></u-icon>
        </view>
      </view>
      <view class="formItem flex" @tap="getTeacherStudents">
        <view class="label flex">
          <text class="red">*</text>
          <text>学生</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            {{userName}}
          </view>
          <u-icon name="arrow-down" color="#999999"></u-icon>
        </view>
      </view>
      <view class="formItem flex" @tap="stateShow = true">
        <view class="label flex">
          <text class="red">*</text>
          <text>状态</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            {{stateName}}
          </view>
          <u-icon name="arrow-down" color="#999999"></u-icon>
        </view>
      </view>
      <view class="formItem">
        <view class="label flex">
          <text class="red">*</text>
          <text>训练内容</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            <textarea v-model="form.test_content" :placeholder="demonstration" placeholder-class="textBox"
              maxlength="-1"></textarea>
          </view>
        </view>
      </view>
      <view class="formItem">
        <view class="label flex">
          <text class="red">*</text>
          <text>本月数据</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            <textarea v-model="form.month_data" :placeholder="demoText" placeholder-class="textBox"
              maxlength="-1"></textarea>
          </view>
        </view>
      </view>
      <view class="formItem">
        <view class="label flex">
          <text class="red">*</text>
          <text>教师点评</text>
        </view>
        <view class="rBox flex">
          <view class="itemContent">
            <textarea v-model="form.teacher_comment" placeholder="请填写教师点评" placeholder-class="textBox"
              maxlength="-1"></textarea>
          </view>
        </view>
      </view>
    </view>
    <view class="btn c-00 f-28" @tap="addFeedbackMonth()">
      确认提交
    </view>

    <!-- 时间选择器 -->
    <u-datetime-picker :show="timeShow" v-model="value" mode="year-month" @confirm="confirm"
      @cancel="cancel"></u-datetime-picker>
    <!-- 学生选择器 -->
    <u-picker :show="userShow" :columns="users" keyName="username" @confirm="confirmUser" @cancel="cancel"></u-picker>
    <!-- 状态选择器 -->
    <u-picker :show="stateShow" :columns="states" keyName="label" @confirm="confirmState" @cancel="cancel"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          month_time: '',
          user_id: '',
          test_content: '',
          month_data: '',
          teacher_comment: '',
          state: ''
        },
        timeShow: false,
        timeType: '',
        value: Number(new Date()),
        userShow: false,
        userName: '请搜索选择学生',
        users: [],

        states: [
          [{
            label: '未通过',
            id: 0
          }, {
            label: '通过',
            // 其他属性值
            id: 1
            // ...
          }]
        ],
        stateShow: false,
        stateName: '请选择状态',
        demonstration: `1.音标：新学用时（  ）小时，训练了
 2.拼读：新学用时（  ）小时，训练了
 3.单词：新学用时（  ）小时，训练了
 4.文章：新学用时（  ）小时，训练了
 5.语法：新学用时（  ）小时，训练了
 6.方法：新学用时（  ）小时，训练了
 7.其它：用时（  ）小时，`,
        demoText: `1.打卡坚持率：
2.平均进出门测：
3.阶段测：`,
      };
    },
    onLoad() {

    },
    methods: {
      timestampToTime(timestamp) {
        var date = new Date(timestamp); // 时间戳为毫秒级别
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        // 格式化月份、日期、小时、分钟、秒
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return year + '-' + month;
      },
      async getTeacherStudents() {
        const {
          data: res
        } = await uni.$http.post('teacher/others/getTeacherStudents')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.userShow = true
        this.users.push(res.data)
      },
      confirm(e) {
        this.form.month_time = this.timestampToTime(e.value)
        this.timeShow = false
      },
      confirmUser(e) {
        this.form.user_id = e.value[0].id
        this.userName = e.value[0].username
        this.userShow = false
      },


      confirmState(e) {
        this.form.state = e.value[0].id
        this.stateName = e.value[0].label
        this.stateShow = false
      },
      cancel() {
        this.timeShow = false
        this.userShow = false
        this.stateShow = false
      },
      async addFeedbackMonth() {
        const {
          data: res
        } = await uni.$http.post('teacher/feedback/addFeedbackMonth', this.form)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.toast.msg('添加成功')
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/feedback/month'
          })
        }, 300)
      }
    }
  }
</script>

<style lang="scss">
  .content {
    .formBox {
      width: 652rpx;
      margin: 0 auto;

      .formItem {
        min-height: 80rpx;
        margin-bottom: 15rpx;
        border-radius: 10rpx;
        border: 2rpx solid #FCF7F7;
        padding: 0 15rpx;

        .label {
          font-size: 28rpx;
          height: 80rpx;
          margin-right: 20rpx;
          width: 200rpx;

          .red {
            color: red;
            margin-right: 10rpx;
          }
        }

        .rBox {
          color: #666;

          .itemContent {
            width: 360rpx;
            padding-left: 20rpx;

            textarea {
              padding: 0 20rpx;
            }

            .textBox {
              font-size: 28rpx;
              color: #999;
            }
          }
        }
      }
    }

    .btn {
      width: 652rpx;
      height: 78rpx;
      line-height: 78rpx;
      text-align: center;
      background: #CCCCCC;
      border: 1.75rpx solid #69A1E0;
      margin: 100rpx auto 50rpx;
    }

  }
</style>